<script>
import { getMemberList } from "@/api/reviewActivities/memberManage";
import { queryLoginShulanAuthority } from "@/api/reviewActivities/userRelevance";
import memberOption from "./com/memberOption.vue";
import ComOperation from "./com/com-operation.vue";
import { formatDateOnly, isSameDate } from "@/utils/index";
import { joinTypeMap } from "@/utils/config/member";

const queryConfig = [
  { label: "微信手机号", prop: "wxMobile", default: "", placeholder: "请输入微信手机号码" },
  { label: "手机号", prop: "mobile", default: "", placeholder: "请输入手机号码" },
];
const tableTitles = [
  { title: "用户昵称", width: "150", key: "nickName" },
  { title: "用户真实姓名", width: "150", key: "realName" },
  { title: "微信手机号", width: "120", key: "wxMobile" },
  { title: "手机号", width: "120", key: "mobile" },
  { title: "用户类型", width: "100", key: "rolesName", default: "普通用户" },
  { title: "账号状态", width: "100", key: "statue", format: v => ["正常", "禁用", "到期"][v || 0] },
  { title: "充值日期", width: "100", key: "rechargeDate", format: formatDateOnly },
  { title: "会员到期日期", width: "100", key: "endDate", format: formatDateOnly },
  { title: "上次登录日期", width: "100", key: "lastLoginDate", format: formatDateOnly },
  { title: "最后操作日期", width: "100", key: "updateTime", format: formatDateOnly },
];
const recordTitles = [
  // { title: "序号", width: "100", key: "num" },
  { title: "类型", width: "100", key: "type", format: v => ["开通", "续约"][v] },
  { title: "开通类型", width: "100", key: "joinMemberType", format: v => joinTypeMap[v] },
  { title: "会员生效时间", width: "100", key: "startDate", format: formatDateOnly },
  { title: "会员到期时间", width: "100", key: "endDate", format: formatDateOnly },
  { title: "充值金额", width: "100", key: "amount", default: "0" },
  { title: "充值类型", width: "100", key: "rechargeType", default: "人工充值" },
  { title: "凭证", width: "100", key: "voucher" },
  { title: "推广人姓名", width: "100", key: "userName" },
  { title: "推广码", width: "100", key: "pushCode" },
  { title: "赠送原因", width: "100", key: "joinTypeReason" },
  { title: "创建时间", width: "100", key: "createTime", format: formatDateOnly },
];
export default {
  name: "userRelevance",
  components: {
    memberOption,
    ComOperation,
  },
  props: {},
  data() {
    return {
      // 搜索条件
      queryParams: queryConfig.reduce((result, item) => {
        result[item.prop] = item.default;
        return result;
      }, {}),
      tableList: [],
      expands: [],
      forbidden: false,
      searched: false, //搜索了
      loading: true,
      operation: "",
      showOptionPop: false,
      currentUserInfo: {},
    };
  },
  created() {
    queryLoginShulanAuthority().then(({data}) => {
      this.loading = false
      this.forbidden = !data.isSuccess
    });
  },
  mounted() {

    // this.handleQuery();
  },
  watch: {},
  computed: {},
  methods: {
    // 搜索按钮操作
    handleQuery() {
      const { queryParams } = this;
      if (Object.values(queryParams).every(v => !v)) {
        return this.$message.error("请输入搜索条件！");
      }

      this.searched = true;
      this.loading = true;

      getMemberList({
        currentPage: 1,
        pageSize: 10,
        t: {
          currentPage: 1,
          pageSize: 10,
          ...queryParams,
        },
      }).then(({ data }) => {
        this.loading = false;

        const pages = data.content.pages;
        this.tableList = pages;
      });
    },
    expandSelect(row, expandedRows) {
      if (expandedRows.length) {
        this.expands = [];
        if (row) {
          this.expands.push(row.id);
        }
      } else {
        this.expands = [];
      }
    },

    createColumnNodes(list) {
      return list.map((item, index) => {
        return (
          <el-table-column
            key={index}
            label={item.title}
            align="center"
            scopedSlots={{
              default: ({ row }) => (item.format ? item.format(row[item.key]) : row[item.key]) || item.default || "--",
            }}
          />
        );
      });
    },

    createFormItemNodes(list, queryParams) {
      return list.map(item => {
        return (
          <el-form-item label={item.label}>
            <el-input
              v-model={queryParams[item.prop]}
              placeholder={item.placeholder}
              maxlength="11"
              clearable
              style="width: 240px"
            />
          </el-form-item>
        );
      });
    },

    createOperateNodes(list, row) {
      return list.map(({ title, method }) => {
        return (
          <el-button size="mini" type="text" onClick={method.bind(this, row, title)}>
            {title}
          </el-button>
        );
      });
    },

    hanldeRefresh() {
      this.showOptionPop = false;
      this.handleQuery();
    },
  },
  render() {
    const { loading, tableList, expands, searched, operation, showOptionPop } = this;
    const formNodes = this.createFormItemNodes(queryConfig, this.queryParams);

    return (
      <div class="app-container" v-loading={loading}>
        {this.forbidden ? (
          <div>该账号无权查看该页面！</div>
        ) : (
          <div>
            <el-form inline={true} label-width="120px" size="small">
              {formNodes}
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" onClick={this.handleQuery}>
                  搜索
                </el-button>
              </el-form-item>
            </el-form>

            {tableList.length === 0 ? (
              <div class="tips">{searched && !loading ? "暂无搜索结果，请确认用户是否已完成注册～" : "请输入需要搜索的条件～"}</div>
            ) : (
              <el-table
                border
                highlight-current-row
                data={tableList}
                row-key={({ id }) => id}
                expand-row-keys={expands}
                on={{ "expand-change": this.expandSelect }}
              >
                <el-table-column
                  label="展开"
                  width="50"
                  align="center"
                  type="expand"
                  scopedSlots={{
                    default: ({ row }) => {
                      const props = {
                        data: row.memberInfo,
                        headerCellStyle: { backgroundColor: "#fff", border: "0" },
                        cellStyle: { border: "0" },
                      };
                      return <el-table props={props}>{this.createColumnNodes(recordTitles)}</el-table>;
                    },
                  }}
                />
                {this.createColumnNodes(tableTitles)}

                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  scopedSlots={{
                    default: ({ row }) => {
                      return (
                        <ComOperation
                          value={row}
                          scopedSlots={{
                            default: ({ operations }) => <div>{this.createOperateNodes(operations, row)}</div>,
                          }}
                        />
                      );
                    },
                  }}
                />
              </el-table>
            )}
          </div>
        )}

        <el-dialog
          width="1000px"
          title={operation}
          visible={showOptionPop}
          on={{
            "update:visible": v => (this.showOptionPop = v),
          }}
          close-on-click-modal={false}
        >
          <memberOption
            userInfo={this.currentUserInfo}
            showOptionPop={showOptionPop}
            joinTypeFilter={({ title }) => ["正式", "试用"].includes(title)}
            on={{
              togglePop: () => (this.showOptionPop = false),
              refresh: this.hanldeRefresh,
            }}
          />
        </el-dialog>
      </div>
    );
  },
};
</script>

<style scoped>
.tips{
  font-size: 18px;
  text-indent: 36px;
  margin-top: 30px;
}
</style>

